<template>
	<view>
		<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
			<view class="swiperItem" v-for="(item, index) in swiperList" :key="index" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
				<view class="children">
					<image class="pic" mode="aspectFill" :src="item.url"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		reactive,
		toRefs,
		inject,
		onMounted
	} from 'vue'
	const appSwiper = defineComponent({
		props: {
			swiperList: {
				type: Array,
				default: []
			}
		},
		setup (props, { emit }) {
			const app : any = inject('global')
			
			onMounted(() => {
				console.log('组件', props.swiperList)
				var macInfo = uni.getSystemInfoSync();
				data.screenWidth = macInfo.screenWidth;
				// 计算swiper样式
				props.swiperList.forEach((item, index) => {
					data.itemStyle.push(getStyle(index))
				})
				console.log('data.itemStyle', data.itemStyle)
			})
			
			const data = reactive({
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: []
			})
			
			const getStyle = (e: any) => {
				if (e > props.swiperList.length / 2) {
					var right = props.swiperList.length - e
					console.log('index0', e, right, (1 - right / 10) )
					return {
						transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
						zIndex: 9999 - right,
						opacity: 0.8 / right
					}
				} else {
					console.log('index1', e)
					console.log('index1-1', e, (1 - e / 10))
					return {
						transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
						zIndex: 9999 - e,
						opacity: 0.8 / e
					}
				}
			}
			
			const startMove = (e: any) => {
				data.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				data.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			}
			
			const endMove = (e: any) => {
				var newList = JSON.parse(JSON.stringify(data.itemStyle))
				if ((e.changedTouches[0].pageX - data.slideNote.x) < 0) {
					// 向左滑动
					var last = [newList.pop()]
					newList = last.concat(newList)
				} else {
					// 向右滑动
					newList.push(newList[0])
					newList.splice(0, 1)
				}
				data.itemStyle = newList
			}
			
			return {
				...toRefs(data),
				app,
				endMove,
				startMove
			}
		}
	})
	export default appSwiper
</script>

<style lang="less" scoped>
	.swiperPanel {
		margin: 20rpx 0;
		height: 344rpx;
		width: 100%;
		overflow: hidden;
		position: relative;

		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all .5s;

			.children {
				height: 100%;
				width: 650rpx;
				margin: 2rpx auto;

				.pic {
					height: 100%;
					width: 100%;
					border-radius: 20px;
					// box-shadow: 0 0 10px #333;
				}
			}
		}
	}
</style>
